<extend name="Public/base" />

<block name="body">
<style>
 .add_record div ul li{
    list-style: none;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: -50px;
 }
 .add_record div ul li span{
    line-height: 30px;
    /*width: 60px;*/
    /*text-align: right;  */
 }
 .add_record div ul li input{
    width: 250px;height: 30px;
    float: right;
    margin-left: 10px;
    border: solid 1px #ccc;
    border-radius: 3px; 
    padding-left: 5px;
    line-height: 26px;
 }
 .add_record div ul li select{
    width: 250px;height: 30px;
    float: right;
 }
 .add_record div ul li input:focus { 
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.c_green {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
    color: white !important;
}
.c_green:hover {
	background-color: #1da51d !important;
    border-color: #1da51d !important;
}
.table tbody td {
    vertical-align: middle !important;
}
._input {
	
}
._input input {
	
}
.search_name {
	border: solid 1px #ccc;
	padding: 4px 4px 4px 8px; 
	margin-right: 5px; 
	border-radius: 4px;
}
.btn-primary { 
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4; 
}
.btn-primary:hover {
	color: #fff; 
	background-color: #286090; 
	border-color: #204d74;
}
.btn-info { 
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da; 
}
.btn-info:hover {
	color: #fff; 
	background-color: #39b3d7; 
	border-color: #269abc;
}
.btn-warning { 
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236; 
}
.btn-warning:hover {
	color: #fff; 
	background-color: #ec971f; 
	border-color: #d58512;
}
.btn-danger { 
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a; 
}
.btn-danger:hover {
	color: #fff; 
	background-color: #c9302c; 
	border-color: #ac2925;
}
.btn-warning>span{font-size: 16px;font-weight: 700;margin-right: 5px;}
.screening{background: white;box-sizing: border-box;padding: 20px 10px;position: relative;}
.condition>span{margin: 0 5px;background: #FFF2EA;color: #ff9052;font-size: 12px;padding: 5px 12px;}
.search{height: 28px;margin: 20px 0;}
#search{outline: none;border: none;height: 30px;}
.square{position: absolute;width: 40px;height: 18px;background: white;left: 50%;bottom: -18px;margin-left: -20px;}.square:before{content: "";display: block;width: 20px;height: 18px;position: absolute;transform: skewX(40deg);background-color: #fff;left: -11px;top: 0;}
.square:after{content: "";display: block;width: 20px;height: 18px;position: absolute;transform: skewX(-40deg);background-color: #fff;top: 0;right: -11px;}    		
.square>span{position:absolute; width: 10px;height: 10px;border: 1px solid black;left: 50%;margin-left: -5px;transform: rotate(45deg);border-left: none;border-top:none ;cursor: pointer;}
.table>thead>tr>th{background: #ff9052;color: red;font-size:13px ;color: white;font-weight: 400;width: 110px;}
.table>tbody>tr>td,.table>tbody>tr{border: none;height: 50px;}
.table-bordered{border: none;}
.table-hover > tbody > tr:hover > td {background-color: lightgoldenrodyellow;}

/*新增组装单页面*/
.add_assembly{display: none;}
.back{font-size: 18px;color: #FF9052;cursor: pointer;margin-left: 10px;}
.input_assembly{height: 58px;background: white;margin-bottom: 1px ;line-height: 58px;box-sizing: border-box;padding: 0 20px;font-size: 12px;}
.input_assembly>input{height: 26px;width: 160px;margin-right: 30px;border: 1px solid #e6eaee;}
#num{background: #ccc;border: none;}
.finished_product{height: 58px;background: white;line-height: 58px;box-sizing: border-box;padding: 0 20px}
#new_product{width: 194px;height: 30px;border: none;background: #f9f9f9;}
#new_product_show{position: absolute;top: 50px;width: 700px;height: 260px;list-style: none;font-size: 0;padding: 0;overflow: auto;background: white;display: none;}
#new_product_show span{display: inline-block;width: 170px;height: 30px;border-bottom: 1px solid #eef1f5 ;border-right: 1px solid #eef1f5; font-size: 14px;line-height: 30px;text-indent: 1em;}
#new_product_show>li{cursor: pointer;}
#new_product_show>li:hover{background: lightgoldenrodyellow;}
.condition1 span{padding: 10px 15px;font-size: 12px;cursor: pointer;}
.style{background: #FFF2EA;color: #FF9052;}
.condition1 select{width: 160px;height: 28px;}
</style>
<!--组装单首页-->
  <div class="showorhide">
	<div class="main-title">
	    <h2>组装单   
	     <button class="btn btn-warning pull-right push_add"><span>+</span>新增组装单</button>
	    </h2>
	</div>
	<div class="screening">
		<div class="condition" style="display: none;">
			筛选条件:
			<span>组装日期：上月</span>
			<span>审批状态：全部</span>
			<span>成品分类：全部成品分类</span>
			<span>成品：全部成品</span>
			<span>零件分类：全部零件分类</span>
			<span>零件：全部</span>
			<span>创建人部门：全部</span>
			<span>创建人：全部</span>
		</div>
		<div class="condition1">
			<div>
				组装日期：
				<span class="style">全部</span>
				<span>今天</span>
				<span>昨天</span>
				<span>本周</span>
				<span>上周</span>
				<span>本月</span>
				<span>本月</span>
				<span>自定义</span>
			</div>
			<div style="margin: 20px 0;">
				审判状态：
				<span class="style">全部</span>
				<span>草稿</span>
				<span>待审批</span>
				<span>已提交</span>
				<span>已驳回</span>
				<span>审批通过</span>
				<span>已作废</span>
			</div>
			<div>
				成品：
				<select>
					<option value="0">全部成品分类</option>
				</select>
				<select>
					<option value="0">全部成品</option>
				</select>
				零件
				<select>
					<option value="0">全部零件分类</option>
				</select>
				<select>
					<option value="0">全部零件</option>
				</select>
				创建人
				<select>
					<option value=""></option>
				</select>
			</div>
		</div>
		<div class="square">
			<span></span>
		</div>
	</div>
    <div class="search">   	
    	<button class="btn btn-warning pull-right">查询</button>
    	<input type="text" name="search" id="search" placeholder="输入关键字查询" class="pull-right"/>
    </div>
    
    <table class="table table-striped table-bordered table-hover excel" id="dataTables-user">
    	<thead>
	    	<tr>
	    		<th>编号</th>
	    		<th>组装日期</th>
	    		<th>组装费用</th>
	    		<th>成品名称</th>
	    		<th>成品编号</th>
	    		<th>成品规格</th>
	    		<th>成品属性</th>
	    		<th>仓库</th>
	    		<th>单位</th>
	    		<th>数量</th>
	    		<th>入库单位成品</th>
	    		<th>入库成本</th>
	    		<th>打印次数</th>
	    		<th>备注</th>
	    	</tr>
	    <thead>	    	
	    <tbody>
	    	<tr>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    		<td>Data</td>
	    	</tr>
	    </tbody>
    </table>
</div>
<!--新增组装单页面-->
<div class="add_assembly">
	<div class="main-title">
	    <h2>组装单  <span class="back">&lt; 返回</span>
	     <button class="btn btn-warning pull-right">提交</button>
	     <button class="btn btn-success pull-right">保存草稿</button>
	    </h2>	    
	</div>
	<div class="input_assembly">
	    	<label for="num">编号 ：</label>
	    	<input type="text" name="num" id="num" readonly/>
	    	<label for="assembly_time">组装日期：</label>
	    	<input type="date" name="assembly_time" id="assembly_time"/>
	    	<label for="assembly_cost">组装费用：</label>
	    	<input type="text" name="assembly_cost" id="assembly_cost"/>
	</div>
	<div class="finished_product">
		    成品
		 <button class="btn btn-success pull-right" style="margin-top: 15px;">选择物料清单</button>
	</div>
	<table class="table table-striped table-bordered table-hover excel" id="dataTables-user">
	   <thead>
			<tr>
				<th style="width: 30px;"></th>
				<th style="width: 210px;">产品名称</th>
				<th style="width: 210px;">产品编号</th>
				<th style="width: 210px;">属性</th>
				<th style="width: 210px;">规格</th>
				<th style="width: 210px;">仓库</th>
				<th style="width: 116px;">单位</th>
				<th style="width: 116px;">数量</th>
				<th style="width: 116px;">入库单位成本</th>
				<th style="width: 140px;">入库成本</th>
				<th style="width: 140px;">备注</th>
			</tr>
	   </thead>
	   <tbody>
			<tr>
				<td style="background: #e8e8e8;">1</td>
				<td style="position: relative;">				   
				  <input type="text" name="new_product" id="new_product"/>
				  <ul id="new_product_show">
				    <li style="background: #e8e8e8;">
				    	<span>产品名称</span>
				    	<span>产品编号</span>
				    	<span>属性</span>
				    	<span>规格</span>
				    </li>
				    <li>
				    	<span>1</span>
				    	<span>2</span>
				    	<span>3</span>
				    	<span>4</span>
				    </li>				    
				  </ul>
				  <div style="position: absolute;left: 0;top: 275px;background: #e8e8e8;width: 690px;height: 35px;line-height: 35px;text-align: center;display: none;"><a href="" style="color: #FF9052;">+新增产品</a></div>
				</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
	   </tbody>
	</table>
	<div class="finished_product" style="margin-top: -15px;">
		    零件		
	</div>
	<table class="table table-striped table-bordered table-hover excel" id="dataTables-user">
	   <thead>
			<tr>
				<th style="width: 30px;"></th>
				<th style="width: 100px;"></th>
				<th style="width: 210px;">产品名称</th>
				<th style="width: 210px;">产品编号</th>
				<th style="width: 210px;">属性</th>
				<th style="width: 210px;">规格</th>
				<th style="width: 210px;">仓库</th>
				<th style="width: 116px;">单位</th>
				<th style="width: 116px;">数量</th>
				<th style="width: 116px;">入库单位成本</th>
				<th style="width: 140px;">入库成本</th>
				<th style="width: 140px;">备注</th>
			</tr>
	   </thead>
	   <tbody>
			<tr style="background: white;">
				<td style="background: #e8e8e8;">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
	   </tbody>
	</table>
</div>
<style>
    .topa{
         position: relative;
        }   
    .newly{
        width: 600px;
        height: 500px;
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -300px;  
    }
    .add_record { text-align: center; }
    .add_record > div { display: inline-block; margin-top: 38px; }
    .add_record ul { margin: 0; }
    .add_record ul li {  }
    .add_record ul li span { float: left; }
    .add_record ul li input { float: left; }
</style>        
        <!-- 用户新增隐藏 -->  
    </div><!-- /.panel-body -->
    <!-- 分页 -->
    <div class="page">
        {$_page}
    </div>
</div><!-- /.panel -->   
</block> 
<block name="script">
<link rel="stylesheet" href="__STATIC__/datetimepicker/css/datetimepicker.css" /> 
<script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
<script src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>   
<script type="text/javascript" src="__JS__/jquery.table2excel.min.js"></script> 
 
<script type="text/javascript">
   $(function(){
   	
   	$(".push_add").click(function(){
   		$(".showorhide").hide();
   		$(".add_assembly").show();
   	})
   	$(".back").click(function(){
   		$(".showorhide").show();
   		$(".add_assembly").hide();
   		
   	})
   	$("#new_product").click(function(e){
   		$(this).nextAll().show();
   		e.stopPropagation();
   	})
   	$(document).click(function(){
   		$("#new_product").nextAll().hide();
   	})
   	$("#new_product_show").on("click","li",function(){
   		
   	})
   	
   	$(".condition1").on("click","span",function(){
   		$(this).addClass("style").siblings().removeClass("style");
   	})
   	
   	
   })
</script>
 
</block>
